import { Component, ReactNode } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import { AtButton, AtFloatLayout } from 'taro-ui'
import fileUpload from '../../../utils/qiniu/upload'
import Taro from '@tarojs/taro'
import {
  TaroCropper
} from 'taro-cropper3';

import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.less'

export default class Index extends Component {
	taroCropper = null;

	render() {
		const { onClose, onOk, visible, image } = this.props
		return (
			<View className='cropper-wrap'>
				{/* <AtFloatLayout isOpened={visible} onClose={onClose}> */}
					{!!image && (
						<TaroCropper
							src={image}
							fullScreen
							hideCancelText={false}
							hideFinishText={false}
							height={1000}
							cropperWidth={600}
							cropperHeight={750}
							ref={(ref) => {
								this.taroCropper = ref
							}}
							onCut={res => {
								console.log(res, 11111)
								setTimeout(() => {
									onOk(res)
								}, 200)
							}}
							onCancel={onClose}
						/>
					)}
					{/* <View className='operation'>
						<View onClick={() => {
							console.log('onClick')
							this.taroCropper && this.taroCropper.cut()
								.then(res => {
									console.log("cut", res);
									
									this.setState({
										cutImagePath: res.filePath
									});

									onOk(res)

								})
								.catch(err => {
									console.log(err);
								})
						}}>
							裁剪
						</View>


						<View onClick={onClose}>
							取消
						</View>
					</View> */}
				{/* </AtFloatLayout> */}
			</View>
		)
	}
}